<template>
  <div class="team-page">
    <!-- 页面标题 -->
    <section class="page-header">
      <div class="container">
        <h1 data-aos="fade-up">我们的团队</h1>
        <p data-aos="fade-up" data-aos-delay="100">专业、创新、协作</p>
      </div>
    </section>

    <!-- 团队介绍 -->
    <section class="team-intro">
      <div class="container">
        <div class="intro-content" data-aos="fade-up">
          <h2>专业团队</h2>
          <p>我们的团队由行业专家组成，拥有丰富的经验和专业知识，致力于为客户提供最优质的服务。</p>
        </div>
      </div>
    </section>

    <!-- 团队成员 -->
    <section class="team-members">
      <div class="container">
        <div class="members-grid">
          <div class="member-card" data-aos="fade-up">
            <div class="member-image">
              <img src="@/assets/team/ceo.jpg" alt="CEO">
            </div>
            <div class="member-info">
              <h3>宋倩</h3>
              <p class="position">首席执行官</p>
              <p class="description">拥有15年行业经验，带领公司不断发展壮大。</p>
            </div>
          </div>

          <div class="member-card" data-aos="fade-up" data-aos-delay="100">
            <div class="member-image">
              <img src="@/assets/team/cto.jpg" alt="CTO">
            </div>
            <div class="member-info">
              <h3>孟小鹏</h3>
              <p class="position">技术总监</p>
              <p class="description">技术专家，负责公司技术研发和创新。</p>
            </div>
          </div>

          <div class="member-card" data-aos="fade-up" data-aos-delay="200">
            <div class="member-image">
              <img src="@/assets/team/coo.jpg" alt="COO">
            </div>
            <div class="member-info">
              <h3>宋璐</h3>
              <p class="position">运营总监</p>
              <p class="description">负责公司日常运营管理，确保业务高效运转。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 加入我们 -->
    <section class="join-us">
      <div class="container">
        <div class="join-content" data-aos="fade-up">
          <h2>加入我们</h2>
          <p>我们正在寻找有才华、有激情的伙伴加入我们的团队。</p>
          <a href="/contact" class="btn">联系我们</a>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
.page-header {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('@/assets/team-header.jpg');
  background-size: cover;
  background-position: center;
  padding: 100px 0;
  text-align: center;
  color: #fff;
}

.page-header h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.team-intro {
  padding: 80px 0;
  background: #f8f9fa;
}

.intro-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.intro-content h2 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.team-members {
  padding: 80px 0;
  background: #fff;
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.member-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.member-image {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.member-card:hover .member-image img {
  transform: scale(1.1);
}

.member-info {
  padding: 20px;
  text-align: center;
}

.member-info h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.position {
  color: #3498db;
  font-weight: 500;
  margin-bottom: 15px;
}

.description {
  color: #666;
}

.join-us {
  padding: 80px 0;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('@/assets/join-us.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}

.join-content {
  max-width: 800px;
  margin: 0 auto;
}

.join-content h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.join-content p {
  margin-bottom: 30px;
  font-size: 1.2rem;
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  background: #3498db;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #2980b9;
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .join-content h2 {
    font-size: 2rem;
  }
}
</style> 